<template>
  <page-header-wrapper>
    <page-tab-list> </page-tab-list>

    <div v-if="setting">
      <a-card :bordered="false" class="card_top_padding no_need_padding" style="padding: 20px 0; margin-bottom: 11px">
        <!-- <a-alert
            message="订单提交通知、订单支付通知、订单发货通知、门店到货通知、订单自提通知，订阅消息仅能开启其中三个，请根据实际情况谨慎配置。"
            banner
          /> -->
        <table style="margin-top: 10px">
          <tr style="border-top: 1px solid #e8e8e8; background: rgb(250, 250, 250); border-radius: 5px 5px 0 0">
            <th>推送列表</th>
            <th>内容</th>
            <th>短信</th>
            <!-- <th>小程序订阅消息</th> -->
            <!-- <th>公众号订阅消息</th> -->
            <th>规则</th>
          </tr>
          <!-- 订单通知 -->
          <NoticeTemplate
            @setSetting="setSetting"
            sendType="register"
            desc="注册、登录发送验证码"
            :rowspan="1"
            rowspanTitle="验证码通知"
            title="手机注册通知"
            :settingInfo="setting.register"
          >
          </NoticeTemplate>
          <NoticeTemplate
            @setSetting="setSetting"
            sendType="agent_examine"
            desc="代理审核通过时，立即通知用户"
            :rowspan="1"
            rowspanTitle="代理审核通过"
            title="代理审核通过"
            :settingInfo="setting.agent_examine"
          >
          </NoticeTemplate>
          <NoticeTemplate
            @setSetting="setSetting"
            sendType="supplier_examine"
            desc="供货商审核通过时，立即通知用户"
            :rowspan="1"
            rowspanTitle="供货商审核通过"
            title="供货商审核通过"
            :settingInfo="setting.supplier_examine"
          >
          </NoticeTemplate>
        </table>
      </a-card>
    </div>

    <a-card v-if="!setting" :bordered="false">
      <div class="example">
        <a-spin />
      </div>
    </a-card>

    <a-modal v-model="show_setting" title="通知编辑" @ok="settingSave" :confirmLoading="confirmLoading">
      <!-- 短信设置 -->
      <template v-if="type == 'sms'">
        <a-form-model-item label="是否开启">
          <a-radio-group v-model="editInfo[type].is_open">
            <a-radio :value="1"> 开启 </a-radio>
            <a-radio :value="0"> 关闭 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="模板ID">
          <a-input v-model="editInfo[type].template_id" placeholder="请填写模板ID" />
        </a-form-model-item>
        <a-form-model-item label="模板变量" v-if="void 0 !== editInfo[type].template_var">
          <a-input v-model="editInfo[type].template_var" placeholder="请填写模板变量" />
        </a-form-model-item>
        <a-row>{{ editInfo[type].help }}</a-row>
        <a-form-model-item label="接收手机号" v-if="void 0 !== editInfo[type].receive_mobile">
          <a-input v-model="editInfo[type].receive_mobile" placeholder="请填写手机号" />
        </a-form-model-item>
        <a-row v-if="void 0 !== editInfo[type].receive_mobile">多个手机号以英文‘,’分开</a-row>
      </template>
      <!-- 小程序设置 -->
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { notice, noticeSave, getTamplateId } from '@/api/setting/notice'
import NoticeTemplate from './components/NoticeTemplateSms'
import { getSmsConfig, setSmsConfig } from '@/api/setting/sms'

export default {
  name: 'saasMchMiniSettingNotice',
  components: {
    NoticeTemplate,
  },
  data() {
    return {
      setting: null,
      send_type: '',
      type: '',
      show_setting: false,
      editInfo: null,
      confirmLoading: false,
      searchLoading: false,
      params: {},
      currentTab: '1',
    }
  },
  created() {
    this.getSetting()
    this.getSmsData()
  },
  watch: {},
  methods: {
    changeTabs(tab) {
      this.currentTab = tab
    },
    getSmsData: async function () {
      getSmsConfig({}).then((res) => {
        const data = res.data
        this.params = data.sms
      })
    },
    saveSmsData() {
      var config = {
        AccessKeyId: this.params.AccessKeyId,
        AccessKeySecret: this.params.AccessKeySecret,
        sign: this.params.sign,
      }
      const hide = this.$message.loading('提交中', 0)
      setSmsConfig(config).then((res) => {
        hide()
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$message.success('保存成功！')
        }
      })
    },
    getSetting() {
      this.loadData = null
      return notice({store_id: 0}).then((res) => {
        if (res.code == 0) {
          this.setting = res.data
        }
      })
    },
    setSetting(res) {
      console.log('res,',res)
      this.send_type = res.send_type
      this.type = res.type
      this.editInfo = this.setting[res.send_type]
      this.show_setting = true
    },
    settingSave() {
      this.setting[this.send_type] = this.editInfo
      this.confirmLoading = true
      noticeSave({
        store_id: 0,
        settingInfo: JSON.stringify(this.editInfo),
        send_type: this.send_type,
        type: this.type,
      }).then((res) => {
        this.confirmLoading = false
        this.show_setting = false
        console.log(res)
      })
    },
    getMiappTemplateId() {
      this.searchLoading = true
      getTamplateId({
        template_id: this.editInfo[this.type].template_id,
        send_type: this.send_type,
        type: this.type,
      }).then((res) => {
        this.searchLoading = false
        if (res.code == 0) {
          this.editInfo[this.type].template_id = res.template_id
          this.editInfo[this.type].kid_list = res.kid_list
        }
      })
      return false
    },
  },
}
</script>
<style lang="less" scoped>
.required::before {
  content: '*';
  color: red;
}
.example {
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
}
th {
  padding: 10px;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
}
td {
  padding: 10px;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
}
tr {
  width: 100%;
  border-bottom: 1px solid #e8e8e8;
}
table {
  width: 100%;
}
</style>
